<template>
  <div class="codeBox">
    <CodeMirrorEditor
      v-model="code"
      :options="editorOptions"
      @ready="onEditorReady"
    />
  </div>
</template>

<script>
import CodeMirrorEditor from '@/components/codeMirror';

export default {
  components: {
    CodeMirrorEditor
  },
  data() {
    return {
      code: 'console.log("Hello, CodeMirror!");',
      editorOptions: {
        lineNumbers: true,
        mode: 'javascript',
        theme: 'material'
      }
    };
  },
  methods: {
    onEditorReady(cm) {
      // 这里的 cm 对象就是 codemirror 对象，等于 this.$refs.myCm.codemirror
      cm.on("inputRead", (cm, obj) => {
        if (obj.text && obj.text.length > 0) {
          let c = obj.text[0].charAt(obj.text[0].length - 1)
          if ((c >= 'a' && c <= 'z') || (c >= 'A' && c <= 'Z')) {
            cm.showHint({ completeSingle:false })
          }
        }
      })
    }
  }
};
</script>
<style>

.codeBox {
  height: 500px;
}

.CodeMirror {
  /* height: auto !important; */
  height: 700px;
  font-family: Arial, monospace;
  font-size: 16px;
  letter-spacing: 2px;
}
</style>
